<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <title>welcome to GM</title>
    <link href="/lender/css/bootstrap.min.css" rel="stylesheet">
    <link href="/lender/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/lender/css/style.min.css" rel="stylesheet">
    <link href="/lender/css/login.min.css" rel="stylesheet">
    <script type="text/javascript" src="/lender/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=2jV6LWQvLdKQXVOsGhr51vAy4gbwmGrQ"></script>
    <style type="text/css">
    	body, html,#container 
    	{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
</head>

<body>
	 <div id="container"></div>
</body>
</html>
<script type="text/javascript">
var mp = new BMap.Map("container");
mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 10);
mp.enableScrollWheelZoom();

var canvasLayer = new BMap.CanvasLayer({
    update: update
});

function update() {
    var ctx = this.canvas.getContext("2d");

    if (!ctx) {
        return;
    }

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    var temp = {};
    ctx.fillStyle = "rgba(50, 50, 255, 0.7)";
    ctx.beginPath();
    var data = [
        new BMap.Point(116.297047,39.979542),
        new BMap.Point(116.321768,39.88748),
        new BMap.Point(116.494243,39.956539)
    ];

    for (var i = 0, len = data.length; i < len; i++) {
        var pixel = mp.pointToPixel(data[i]);
        ctx.fillRect(pixel.x, pixel.y, 30, 30);
    }
}
mp.addOverlay(canvasLayer);




</script>
